import React, { Fragment } from "react";
import { Layout, FloatButton, Card } from "antd";
import { Routes, Route, Navigate } from "react-router-dom";
import NotFound from "@/views/NotFound";
import SongsDetails from "@/views/details/SongsDetails";
import AlbumsDetails from "@/views/details/AlbumsDetails";
import ArtistsDetails from "@/views/details/ArtistsDetails";
import PlaylistsDetails from "@/views/details/PlaylistsDetails";
import MVDetail from "@/views/details/MVDetail.jsx";
import menus from "@/routers";
import { CommentOutlined, CustomerServiceOutlined,CheckOutlined,CloseOutlined } from "@ant-design/icons";
import { setThemeMotion } from "../../store/modules/app";
import { useDispatch, useSelector } from "react-redux";
const { Content } = Layout;

export default function AppContent() {
  const { Meta } = Card;
  const { themeMotion } = useSelector((state) => state.appSlice);
  const dispatch=useDispatch()
  // 渲染路由Route的方法
  const renderRoute = (menus) => {
    return menus.map((item) => {
      if (item.children) {
        // 有children就是二级菜单
        if (item.index) {
          return (
            <Fragment key={item.key}>
              <Route index element={<Navigate to={item.key} />} />
              <Route key={item.key} path={item.key} element={item.element}>
                {renderRoute(item.children)}
              </Route>
            </Fragment>
          );
        } else {
          return (
            <Route key={item.key} path={item.key} element={item.element}>
              {renderRoute(item.children)}
            </Route>
          );
        }
      } else {
        // 遍历一级菜单
        if (item.index) {
          return (
            <Fragment key={item.key}>
              <Route
                key={item.key}
                path={item.key}
                element={item.element}
              ></Route>
            </Fragment>
          );
        } else {
          return (
            <Route
              key={item.key}
              path={item.key}
              element={item.element}
            ></Route>
          );
        }
      }
    });
  };
  return (
    <Content id="content" style={{ overflowY: "auto" }}>
      <Routes>
        {renderRoute(menus)}
        <Route path="*" element={<NotFound />} />
        <Route path="/songs/details/:id" element={<SongsDetails />} />
        <Route path="/albums/details/:id" element={<AlbumsDetails />} />
        <Route path="/artists/details/:id" element={<ArtistsDetails />} />
        <Route path="/playlists/details/:id" element={<PlaylistsDetails />} />
        <Route path="/mv/details/:id" element={<MVDetail />}
        />
      </Routes>

      <FloatButton.Group
        icon={<CustomerServiceOutlined />}
        trigger="hover"
        type="primary"
        style={{
          right: 10,
          bottom: 150,
        }}
      >
        <FloatButton
          icon={themeMotion ? <CheckOutlined /> : <CloseOutlined />}
          onClick={() => {
            dispatch(setThemeMotion(!themeMotion));
          }}
        />
        <FloatButton
          tooltip={
            <Card
              hoverable
              style={{ width: 150 }}
              cover={
                <img
                  alt="example"
                  src="https://p1.music.126.net/wCRnpjXHpGRiq1c1uCkIFQ==/109951164246717547.png"
                />
              }
            >
              <Meta style={{ fontSize: "12px" }} description="扫描二维码下载" />
            </Card>
          }
          icon={<CommentOutlined />}
        />
      </FloatButton.Group>
      <FloatButton.BackTop />
    </Content>
  );
}
